<template>
	<view>
		<view class="content">
			<view class="nav-conte">
				<view class="nav-li" @tap.stop="selenav(0)" :class="{'active':navIndex==0}">
					{{i18n.Mining_king}}
				</view>
				<view class="nav-li" @tap.stop="selenav(1)" :class="{'active':navIndex==1}">
					{{i18n.Best_secretary}}
				</view>
			</view>
			
			
			<view class="nav-content">
				<view>{{i18n.Rank}}</view>
				<view>{{i18n.user}}</view>
				<view>{{i18n.Number_of_games_won}}</view>
			</view>
			<template v-if="list.length>0">
				<block v-for="(item,index) in list" :key="index">
					<view class="list">
						<view>{{item.ranking}}</view>
						<view>{{(navIndex==1?item. jsuid : item.zjuid ) || '--'}}</view>
						<view>{{(navIndex==1?item. jushu : item.zhongj ) || 0}}</view>
					</view>
				</block>
			</template>
			<template v-else>
				<view class="nodata">{{i18n.nodata}}</view>
			</template>
			
		</view>
	</view>
</template>

<script>
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		computed: {
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLang',
				'getLogin',
				'getLoginInfo'
			])
		},
		data() {
			return {
				navIndex:0,
				list:[]
			};
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'我的游戏记录':'My game record'
			})
			
			
			this.navIndex=0;
			this.list = []
			this.getHistory();
		},
		methods:{
			selenav(index){
				this.navIndex = index;
				this.list = []
				this.getHistory();
			},
			getHistory(){
				fetch(this.getRequestUrl+"/api/Game/game_ranking",{},'post')
					.then(res=>{
						if(res.data.code==1){
							this.list = res.data.data;
						}
					})
			}
		}
	}
</script>
<style>
	page{
		background: #f6f5f8 !important;
	}
</style>
<style lang="scss" scoped>
	.nodata{
		padding: 40rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #A5ACC4;
	}
	.nav-conte{
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		.nav-li{
			flex: 1;
			text-align: center;
			line-height: 60rpx;
			color: #262631;
			font-size: 36rpx;
			font-weight: lighter;
			&.active{
				color: #2B375B;
				font-weight: bold;
				position: relative;
				&::after{
					position: absolute;
					width: 65rpx;
					height: 5rpx;
					border-radius: 5rpx;
					content: "";
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					background: #2B375B;
				}
			}
		}
	}
	.content{
		
		.nav-content{
			margin: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view{
				flex: 1;
				font-size: 26rpx;
				line-height: 110rpx;
				text-align: center;
				&:first-of-type{
					text-align: left;
				}
				&:last-of-type{
					text-align: right;
				}
			}
		}
		.list{
			margin: 0 30rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 4rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,.1);
			padding: 0 20rpx;
			view{
				line-height: 70rpx;
				font-size: 26rpx;
				text-align: center;
				&:first-of-type{
					text-align: left;
				}
				&:last-of-type{
					text-align: right;
				}
			}
		}
	}
</style>
